import { Button, Col, Form, Row, Select, Table } from 'antd'
import React from 'react'
import { useState } from 'react'
import MyDatePicker from './MyDatePicker'

export default function CustomReturn() {
  const [selectedDateString, setSelectedDateString] = useState(null)
  return (
    <>
      <Row>
        <Col span={24}>
          <Form layout="inline">
            <Form.Item label="触达方式" name="xw">
              <Select
                style={{ width: 150 }}
                options={[
                  { label: '1', value: '1' },
                  { label: '1', value: '1' }
                ]}
              />
            </Form.Item>
            <Form.Item label="时间选择" name="xw">
              <MyDatePicker
                selectedDateString={selectedDateString}
                setSelectedDateString={setSelectedDateString}
              />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
            </Form.Item>
          </Form>
        </Col>
        <Col span={24} style={{ marginTop: 10 }}>
          <Table
            rowClassName="ant-table-row"
            rowKey="id"
            dataSource={[
              { id: 1, cn: '双十一活动', cn1: '短信', cn2: '2023-11-01' },
              { id: 2, cn: '618活动', cn1: '公众号', cn2: '2023-06-11' },
              { id: 3, cn: '双十二活动', cn1: '小程序', cn2: '2023-12-11' },
              { id: 4, cn: '女神节活动', cn1: 'APP', cn2: '2023-03-08' },
              { id: 5, cn: '国庆节活动', cn1: '公众号', cn2: '2023-10-01' },
              { id: 6, cn: '端午节活动', cn1: '公众号', cn2: '2024-06-05' }
            ]}
            columns={[
              { title: '编号', dataIndex: 'id', key: 'id' },
              { title: '触达名称', dataIndex: 'cn', key: 'cn' },
              { title: '触达方式', dataIndex: 'cn1', key: 'cn1' },
              { title: '参与时间', dataIndex: 'cn2', key: 'cn2' }
            ]}
          />
        </Col>
      </Row>
    </>
  )
}
